<template>
    <div class="big-bg bg-100 bh bend">
        <div class="form-bg">
            <div class="login-form">
                <el-form
                    :model="formData"
                    :rules="rules"
                    ref="form"
                    class="form"
                >
                    <el-form-item prop="username">
                        <el-input
                            class="form-input"
                            autocomplete="new-password"
                            placeholder="请输入账号"
                            v-model="formData.username"
                            clearable
                        >
                            <div
                                slot="prefix"
                                class="ico-user bg-contain ico"
                            ></div>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <zb-pass
                            class="form-input"
                            placeholder="请输入密码"
                            maxlength="16"
                            v-model="formData.password"
                            clearable
                        >
                            <div
                                slot="prefix"
                                class="ico-pass bg-contain ico"
                            ></div>
                        </zb-pass>
                    </el-form-item>
                    <div class="bh bend">
                        <el-checkbox v-model="checked">记住密码</el-checkbox>
                    </div>
                </el-form>
                <el-button
                    ref="loginClick"
                    @click="onLogin"
                    class="btn-blue login-btn"
                    >登录</el-button
                >
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { userLogin } from "@/api/core/user";
import cookies from "@/utils/store/cookies";
import setting from "@/setting";
import { mixinViewForm } from "@/mixin/view/Form";
// 密码储存位置
const userKey = setting.appName + "user";
@Component({
    mixins: [mixinViewForm]
})
export default class Login extends Vue {
    formData = {
        username: "",
        password: ""
    };
    // 是否记住密码
    checked = false;
    rules = {
        username: [
            {
                required: true,
                message: "请输入账号"
            },
            {
                min: 4,
                message: "只能输入4-20个字符"
            }
        ],
        password: [
            {
                required: true,
                message: "请输入密码"
            },
            {
                min: 4,
                message: "只能输入4-20个字符"
            }
        ]
    };

    @Action("account/loginSuccess") loginSuccess: any;

    // 账号用户登录按钮
    onLogin() {
        const me = this as any,
            checked = me.checked,
            data = me.formData;
        me.submitFormBack(["username", "password"], userLogin, data).then(
            (res: any) => {
                if (checked) {
                    // 如果需要记住当前用户
                    const userData = JSON.stringify(data);
                    // 默认保存时间为7天
                    cookies.set(userKey, userData, {
                        expires: 7
                    });
                } else {
                    cookies.set(userKey, "");
                }
                me.loginSuccess(res);
            }
        );
    }
    // 初始化记住密码
    getCookie() {
        const _user = cookies.get(userKey);
        if (_user) {
            const data = JSON.parse(_user);
            this.formData.username = data.username;
            this.formData.password = data.password;
            this.checked = true;
        }
    }
    // 记住密码选中事件
    handleCheck() {
        this.checked = !this.checked;
        if (!this.checked) {
            cookies.set(userKey, ""); // 删除_user的办法
        }
    }
    // 页面加载调用获取cookie值
    mounted() {
        this.getCookie();
    }
}
</script>
<style lang="scss" scoped>
@include ico-list("~@/assets/images/ico/user/", "user", "pass", "code");

.big-bg {
    width: 100%;
    height: 100%;
    min-height: 768px;
    // background-image: url("../assets/images/Backgroundmap.png");

    .form-bg {
        @include border-radius(6px);
        margin-right: 18%;
        padding: 20px;
        background-color: rgba(256, 256, 256, 0.1);

        .login-form {
            @include border-radius(8px);
            background-color: #ffffff;
            padding: 66px 40px 30px 40px;

            .login-btn {
                width: 320px;
                font-size: 17px;
            }

            .code-btn {
                font-size: 14px;
                width: 106px;
                margin-left: 6px;
            }
        }
    }
}

/deep/.el-tabs {
    .el-tabs__nav {
        @include box-display(row);
        @include box-align(center, center);
        width: 100%;

        .el-tabs__active-bar {
            display: none;
        }
    }

    .el-tabs__nav-wrap {
        &:after {
            height: 0;
        }
    }

    .el-tabs__header {
        margin: 0;
    }

    .el-tabs__item {
        font-size: 20px;
        color: #222;
        height: 40px;
        padding: 0;
        margin: 0 13px;

        &.is-active {
            color: #2680d1;
            border-bottom: 2px solid #2680d1;
        }
    }
}

/deep/.form {
    @include placeholder(15px, #999);
    padding-top: 37px;
    height: 233px;

    .el-form-item {
        margin-bottom: 28px;
    }

    .next-item {
        margin-bottom: 16px;
    }

    .last-item {
        margin-bottom: 0;
    }

    .el-form-item__content {
        line-height: 36px;
    }

    .sm-input,
    .form-input {
        height: 36px;

        .el-input__prefix {
            left: 0;
        }

        .el-input__inner {
            height: 100%;
            line-height: 100%;
            padding-left: 48px;
        }

        .ico {
            margin: 9px 18px;
            width: 17px;
            height: 17px;
        }
    }

    .form-input {
        width: 320px;
    }

    .sm-input {
        width: 206px;
    }

    .btn-code {
        @include border-radius(1px);
        border: 1px solid #dcdcdc;
        width: 106px;
        height: 36px;
        padding: 0;
        display: inherit;
        margin-left: 6px;
    }

    .el-checkbox {
        font-size: 17px;

        .el-checkbox__inner {
            width: 17px;
            height: 17px;

            &:after {
                width: 4px;
                height: 9px;
                left: 5px;
                top: 1px;
            }
        }

        .el-checkbox__label {
            font-size: 13px;
            color: #000;
        }
    }
}

.btn-blue {
    @include border-radius(1px);
    height: 36px;
    line-height: 36px;
    background-color: #409eff;
    padding: 0;
}
</style>
